<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <style>

    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="header-common f7-header">
            <div class="flex-x-s header ">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title">
                    {{detailItem.title}}
                </div>
                <div class="flex-x-s">
                    <div class="header-icon" @click="showDialog(1)">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/report.png" alt="">
                    </div>
                    <div v-if="module==='PARTS'&&canOnlinePay" class="detail-header-icon" @click="goCart()">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/detail/detail_cart_ico.png" alt="">
                    </div>
                    <div class="header-icon" @click="showDialog(2)">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/share.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <van-goods-action class="foot">
            <van-goods-action-icon color="#408CEC" icon="shop-o" text="店铺" @click="sendEvent('goStore')">
            </van-goods-action-icon>
            <van-goods-action-icon color="#408CEC" icon="service-o" text="客服" @click="sendEvent('goIM')">
            </van-goods-action-icon>
            <van-goods-action-icon :color="isCollect?'#F53B31':'#408CEC'" :icon="isCollect?'star':'star-o'" text="收藏"
                @click="doCollect"></van-goods-action-icon>
            <div class="foot-btn" style="width: 2.2rem;" v-if="module==='PARTS'">
                <van-button class="foot-call" round type="info" v-if="!canOnlinePay && detailItem.inquiried"
                    @click="sendEvent('call')">立即联系</van-button>
                <van-button round color="#FF8D23" style="width:1.2rem;margin-right: .08rem;font-size: .14rem;"
                    type="info" v-if="canOnlinePay" @click="sendEvent('addCart')">加入购物车</van-button>
                <van-button round type="info" style="width:1rem;font-size: .14rem;" v-if="canOnlinePay"
                    @click="sendEvent('purchase')">立即购买</van-button>
            </div>
            <div v-else class="foot-btn" style="width: 2.2rem;">
                <van-button class="foot-call" round type="info" v-if="!onlineBuy && detailItem.inquiried"
                    @click="sendEvent('call')">立即联系</van-button>
                <van-button round color="#FF8D23" style="width:1.2rem;margin-right: .08rem;font-size: .14rem;"
                    type="info" v-if="onlineBuy" @click="sendEvent('addCart')">加入购物车</van-button>
                <van-button round type="info" style="width:1rem;font-size: .14rem;" v-if="onlineBuy"
                    @click="sendEvent('purchase')">立即购买</van-button>
            </div>
        </van-goods-action>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js "></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function () {
            var vm = new Vue({
                el: '.app',
                data: {
                    detailItem: { title: '' },
                    onlineBuy: false,
                    isCollect: false,
                    headH: 0,
                    footH: 0,
                    module: null,
                    canOnlinePay: false,//是否支持在线支付
                },
                mounted: function () {
                    this.headH = $api.fixStatusBar($api.dom('.header-common')) + 4
                    this.footH = $api.fixTabBar($api.dom(".foot"))

                    var systemSet = $api.getStorage('systemSet')
                    this.onlineBuy = systemSet ? systemSet.onlineBuyEnabled : false

                    if (api.pageParam.from == 'banner') {
                        this.getProductDetail(api.pageParam.id)
                    } else {
                        this.detailItem = api.pageParam.detailItem
                        this.getProductDetail(this.detailItem.id)
                    }
                    this.module = api.pageParam.module //PARTS 配件
                },
                methods: {
                    //跳转到购物车
                    goCart() {
                        if (!checkToken()) return false;
                        api.openWin({
                            name: "cart_win",
                            url: "../store/cart_win.html",
                            bounces: false,
                        });
                    },
                    // 获取商品详情
                    getProductDetail: function (id) {
                        let vm = this
                        index.product("getProductDetail")(id, function (ret) {
                            vm.detailItem = ret.data
                            vm.module = ret.data.type == 0 ? 'SELL_DEVICE' : ret.data.type == 1 ? 'LEASE_DEVICE' : 'PARTS'
                            vm.canOnlinePay = ret.data.canOnlinePay
                            checkHasCollect(vm.module, id, vm)
                            addBrowse(vm.module, id)
                            vm.openFrame(ret.data)
                        })
                    },

                    doCollect() {
                        handleCollect(vm.module, vm.detailItem.id, vm)
                    },

                    openFrame(detailOtherData) {
                        api.openFrame({
                            name: 'goods_detail_frm',
                            url: 'goods_detail_frm.html',
                            reload: true,
                            rect: {
                                marginTop: this.headH,
                                marginBottom: this.footH,
                                w: 'auto'
                            },
                            pageParam: {
                                detailOtherData: detailOtherData,
                                title: api.pageParam.title,
                                module: api.pageParam.module,
                                queryOwn: api.pageParam.queryOwn
                            }
                        });
                    },
                    back() {
                        api.closeWin();
                    },
                    showDialog(type) {
                        if (!checkToken()) return false;
                        if (this.detailItem.title) {
                            toReportOrShareDialog(vm.module, vm.detailItem.id, type, this.detailItem.title)
                        }
                    },
                    sendEvent(type) {
                        if (!checkToken()) return false;
                        api.sendEvent({
                            name: 'sendGoodsDetail',
                            extra: { type: type }
                        });
                    }
                },
            })
        }
    </script>
</body>

</html>